<template>
    <div class="favorite clear">
        <list-top></list-top>
        <div class="mall-position">主页 > 批发商城 > 收藏夹</div>
        <div class="favoriteMain clear">
                <div class="headTitle">
                    <router-link to="/favoriteproduct"><span>收藏药品（160）</span></router-link>
                    <router-link to="/favoritestore"><span  class="active">收藏店铺（60）</span></router-link>
                </div>
            <div class="favoriteStoreMain clear">
                <div class="storePublicStyle-a clear" v-for="(oStore,index) in tableList" :key="index">
                    <div class="storeMsg">
                        <div class="storeLogo">
                           <img :src="oStore.logo" alt="">
                        </div>
                        <div class="storeMsgContent">
                            <router-link to="/" class="s-zhiding"><i class="iconfont icon-zhiding"></i></router-link>
                            <router-link to="/" class="s-shanchu"><i class="iconfont icon-shanchu"></i></router-link>
                            <div class="s-name">{{oStore.name}}</div>
                            <div class="s-credit">信用分：{{oStore.credit}}分</div>
                            <div class="s-sentiment">收藏人气：{{oStore.sentiment}}</div>
                            <router-link to="/" class="s-service">联系客服<i class="iconfont icon-kefu"></i></router-link>
                        </div>
                    </div>
                    <div class="rcdProduct">
                        <div class="topTip">推荐药品</div>
                        <div class="rcdProductList">
                            <swiper :options="swiperOption">
                                <swiper-slide v-for="(oimg,index) in oStore.slidesList" :key="index">
                                    <router-link to="/">
                                        <img :src="oimg.smimg" alt="">
                                        <div class="r-name">{{oimg.name}}</div>
                                        <div class="r-price">¥{{oimg.price}}</div>
                                    </router-link>
                                </swiper-slide>
                            </swiper>
                            <div class="swiper-button-prev" slot="button-prev"></div>
                            <div class="swiper-button-next" slot="button-next"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pageBotom">
                <!-- <div class="pageBotomLeft">
                    <el-checkbox class="fl" v-model='cheackAllChecked' @change='checkAllFun'>全选</el-checkbox>
                    <span class="reverseSelected" @click="reverseChecked">反选</span>
                    <span class="deleteSelected">删除选中</span>
                </div> -->
                <div class="pageBotomRight">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import listTop from "./public/listTop";
    import {
        swiper,
        swiperSlide
    } from 'vue-awesome-swiper'
    export default {
        components: {
            listTop,
            swiper,
            swiperSlide
        },
        data() {
            return {
                activeTick: false,
                tableList: [ //商品列表
                    {
                        id: 1,
                        name: "桂林医药集团有限公司有限",
                        logo:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        credit: "中成药",
                        sentiment: "268.00",
                        slidesList:[  //小图片集合
                                    {
                                        smimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                                        name:"白云山小柴胡颗白云山小柴胡颗",
                                        price:"280.00"
                                    },
                                    {
                                        smimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                                        name:"白云山小柴胡颗白云山小柴胡颗",
                                        price:"280.00"
                                    },
                                    {
                                        smimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                                        name:"白云山小柴胡颗白云山小柴胡颗",
                                        price:"280.00"
                                    },
                                    {
                                        smimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                                        name:"白云山小柴胡颗白云山小柴胡颗",
                                        price:"280.00"
                                    },
                                    {
                                        smimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                                        name:"白云山小柴胡颗白云山小柴胡颗",
                                        price:"280.00"
                                    },
                                    {
                                        smimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                                        name:"白云山小柴胡颗白云山小柴胡颗",
                                        price:"280.00"
                                    }
                                ],
                    },
                     {
                        id: 1,
                        name: "桂林医药集团有限公司有限",
                        logo:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        credit: "中成药",
                        sentiment: "268.00",
                        slidesList:[  //小图片集合
                                    {
                                        smimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                                        name:"白云山小柴胡颗白云山小柴胡颗",
                                        price:"280.00"
                                    },
                                    {
                                        smimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                                        name:"白云山小柴胡颗白云山小柴胡颗",
                                        price:"280.00"
                                    },
                                    {
                                        smimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                                        name:"白云山小柴胡颗白云山小柴胡颗",
                                        price:"280.00"
                                    },
                                    {
                                        smimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                                        name:"白云山小柴胡颗白云山小柴胡颗",
                                        price:"280.00"
                                    },
                                    {
                                        smimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                                        name:"白云山小柴胡颗白云山小柴胡颗",
                                        price:"280.00"
                                    },
                                    {
                                        smimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                                        name:"白云山小柴胡颗白云山小柴胡颗",
                                        price:"280.00"
                                    }
                                ],
                    },
                ],
                cheackAllChecked: false,
                checkArr: [],
                checkCompleteArr: [],
                currentPage4: 4,
                swiperOption: {
                    slidesPerView: 5,
                    spaceBetween: 30,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                },
                
            }
        },
        methods: {
            
            selectStoreItem(index) {
                console.log(index);
            },
            checkAllFun() {
                //实现全选（1/5）
                var _this = this;
                this.checkArr = [];
                if (this.cheackAllChecked) {
                    this.tableList.forEach(function(item, index) {
                        if (index >= 0) {
                            _this.checkArr.push(item.id);
                        }
                    });
                }
            },
            reverseChecked() {
                //实现反选（2/5）
                var _this = this;
                var changeArr = [];
                this.tableList.forEach(function(item, index) {
                    if (index >= 0) {
                        changeArr.push(item.id);
                    }
                });
                this.removeByValue(changeArr, this.checkArr);
            },
            removeByValue(changearr, checkarr) {
                //反选过滤函数（3/5）
                var _this = this;
                for (var j = 0; j < checkarr.length; j++) {
                    for (var i = 0; i < changearr.length; i++) {
                        if (changearr[i] === checkarr[j]) {
                            changearr.splice(i, 1);
                            break;
                        }
                    }
                }
                this.checkArr = changearr;
                if (changearr.length <= _this.checkCompleteArr.length) {
                    this.cheackAllChecked = false;
                }
                if (changearr.length === _this.checkCompleteArr.length) {
                    this.cheackAllChecked = true;
                }
            },
            changevalue() {
                //选项的change事件（4/5）
                var _this = this;
                if (this.checkArr.length <= _this.checkCompleteArr.length) {
                    this.cheackAllChecked = false;
                }
                if (this.checkArr.length === _this.checkCompleteArr.length) {
                    this.cheackAllChecked = true;
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
        },
        mounted() {
            //全选或反选用到的完整数组值（5/5）
            var _this = this;
            this.tableList.forEach(function(item, index) {
                if (index >= 0) {
                    _this.checkCompleteArr.push(item.id);
                }
            });
        }
    }
</script>
<style lang="less">
    @import "css/favorite.less";
</style>

